<template>
    <div class="banner">
        <swiper class="swiper" :options="swiperOption">
            <swiper-slide v-for="v in banner" :key='v.dotBanner'>
                <img class="swiper-image" :src="v.cardUrl + '?x-oss-process=image/resize,m_fixed,h_344,w_500'"  :data-item="JSON.stringify(v)"/>
                <div class="status" :data-item="JSON.stringify(v)">
                    <div class="status-title" :data-item="JSON.stringify(v)" >回放</div>
                    <div class="status-time" :data-item="JSON.stringify(v)" >{{ v.duration }}</div>
                </div>
                <div class="img-play" :data-item="JSON.stringify(v)"  ></div>
                <div class="img-shadow" :data-item="JSON.stringify(v)"  ></div>
                <p class="img-details" :data-item="JSON.stringify(v)"  >{{ v.contentTitle }}</p>
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>

    </div>
</template>

<script>
export default {
    props:['cardList'],
    data() {
        const _self = this;
        return {
            banner: [
                // {
                //     'cardUrl': 'https://img0.baidu.com/it/u=3593454291,2854711423&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
                // },
                // {
                //     'cardUrl': 'https://pic.lvmama.com/uploads/pc/place2/2017-11-24/19e96e3c-ba34-4dc4-8b17-62b3aa595cf9.jpg',
                // },
                // {
                //     'cardUrl': 'https://pic.lvmama.com/uploads/pc/place2/2017-11-24/19e96e3c-ba34-4dc4-8b17-62b3aa595cf9.jpg',
                // },
                // {
                //     'cardUrl': 'https://pic.lvmama.com/uploads/pc/place2/2017-11-24/19e96e3c-ba34-4dc4-8b17-62b3aa595cf9.jpg',
                // },
                // {
                //     'cardUrl': 'https://pic.lvmama.com/uploads/pc/place2/2017-11-24/19e96e3c-ba34-4dc4-8b17-62b3aa595cf9.jpg',
                // }
            ],
            swiperOption: {
                centeredSlides: true,
                slidesPerView: 'auto',
                speed: 500,
                spaceBetween: 40, // 在slide之间设置距离（单位px）。
                loop: true,
                cubeEffect: {
                    slideShadows: true,
                    shadow: true,
                    shadowOffset: 10,
                    shadowScale: 0.6
                },
                autoplay: {
                    delay: 5000,
                    stopOnLastSlide: false,
                    disableOnInteraction: false,
                },
                coverflowEffect: {
                    rotate: 0,
                    stretch: 0,
                    depth: 100,
                    // modifier: 1,
                    slideShadows: true
                },
                pagination: {
                    el: '.swiper-pagination',
                },
                on: {
                    click: function(e)  {
                        const _this = this
                        let item = JSON.parse(e.target.getAttribute('data-item'))
                        let url = item.h5Url
                        let mainId = item.mainId
                        let videoId = item.videoId
                        let title = item.contentTitle  
                        let isZxjtUrl = _self.isZxjtUrl(url)
                        $sensorsTrack('financing_videoZoneHomePageOpClick', {
                            click_position: '固定banner位',
                            content_title: title,
                            main_id: mainId,
                            jump_url: url
                        });
                        if (isZxjtUrl) {
                            let params = {
                                path: `/${_self.$channel}/liveBack/${videoId}`,
                                query: {
                                    dzhPage: 'true'
                                }
                            }
                            _self.$router.push(params)
                        } else {
                            const params = {
                                'linkType': 1,
                                'link': url
                            }
                            fun.linkUrlFloatVideo(params)
                        }

                    }
                }
            }
        }
    },
    methods: {
      //卡片位曝光度埋点
        exposureDot(title, url, mainId) {
            $sensorsTrack('financing_videoZoneHomePageOpExposure', {
                exposure_position: '固定banner位',
                content_title: title,
                main_id: mainId,
                jump_url: url
            });
        },
        //曝光率方法
        obServerDom(selectDom) {
            //异步 this.$nextTick()
            const ob = new IntersectionObserver((entries) => {
                entries.forEach((i) => {
                    if (i.isIntersecting) {//进入视口
                        let url = i.target.getAttribute('data-url')
                        let title = i.target.getAttribute('data-title')
                        let mainId = i.target.getAttribute('data-mainId')
                        this.exposureDot(title, url, mainId)//轮播图曝光度打点
                    }
                    //ob.unobserve(target)//取消观察
                });
            }, {
                //配置项
                root: null,
                threshold: 1.0,
                rootMargin: '0px',
            })
            const queryDom = document.querySelectorAll(selectDom);
            console.log(queryDom);
            queryDom.length && queryDom.forEach((item) => {
                ob.observe(item)
            })
        },  
        //判断url跳转方式
        isZxjtUrl(url) {
            let arrUrl = ['https://testlive.csc108.com', 'https://live.csc108.com/', 'https://sit.dzhlive.com']
            let flag = arrUrl.some(item => {
                return url.includes(item)
            })
            return flag
        },
    },
    watch: {
        cardList(newValue) {
            this.banner = newValue
            this.$nextTick(() => {
                this.obServerDom('.swiper-image')
            })
        }
    }
}
</script>

<style scoped lang="less">
.banner {
    margin-top: 18px;
    width: 100%;
    height: 344px;
}

.swiper {
    position: relative;

    .status {
        position: absolute;
        top: 22px;
        left: 25px;
        width: 132px;
        height: 30px;
        background: rgba(255, 128, 0, 0.4);
        border-radius: 6px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .status-title {
            width: 56px;
            height: 30px;
            background: #FF8000;
            border-radius: 6px;
            font-size: 20px;
            font-weight: 500;
            color: #FFFFFF;
            line-height: 28px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .status-time {
            width: 54px;
            height: 28px;
            font-size: 20px;
            font-weight: 500;
            color: #FFFFFF;
            line-height: 28px;
            margin-right: 15px;
        }
    }

    .img-play {
        position: absolute;
        background-image: url('../../assets/images/zxjt/playButton.png');
        background-size: cover;
        width: 100px;
        height: 100px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    img {
        width: 100%;
        height: 344px;
        border-radius: 20px;
    }

    .img-shadow {
        width: 100%;
        height: 92px;
        border-radius: 20px;
        background-image: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 100%);
        position: absolute;
        bottom: 0;
        left: 0;
    }

    .img-details {
        position: absolute;
        bottom: 23px;
        left: 26px;
        color: #ffffff;
        font-size: 28px;
    }


    /deep/ .swiper-pagination-bullet {
        width: 16px;
        height: 16px;
        margin: 0 2px;
        background: #FFF6F2;
        opacity: 1;
    }

    /deep/ .swiper-pagination-bullet-active {
        opacity: 1;
        background: #FF5A00;
    }

    /deep/ .swiper-pagination {
        position: absolute;
        text-align: right;
        padding-right: 10px;
        -webkit-transition: 300ms opacity;
        transition: 300ms opacity;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        z-index: 10;
    }


}
</style>